import React, { Component } from 'react'
import { Tabs, Spin, message } from 'antd'
import CommonCard from './components/CommonCard'
import ServiceModal from './components/ServiceModal'
import getData from '@/Utils/fecth'
import { address } from '@/Utils/apiConfig'
import './index.less'

const { myServiceList, serviceCenterList } = address.applicationService
const { TabPane } = Tabs

class ApplicationService extends Component {
  constructor(props) {
    super(props)
    this.state = {
      tabArr: [
        {
          key: 'my-service',
          tabText: '我的服务',
        },
        {
          key: 'service-center',
          tabText: '服务中心',
        },
      ],
      curData: [],
      myServiceData: [],
      serviceCenterData: [],
      currentKey: (props.location.params && props.location.params.tabKey) || 'my-service',
      buyContractIds: [],
      showServiceModal: false,
      showLoading: false,
    }
  }
  componentDidMount() {
    this.setState({
      showLoading: true,
    })
    Promise.all([
      this.getMyServiceList(),
      this.getServiceCenterList(),
    ]).then(res => {
      let curData = [], currentKey = this.state.currentKey, buyContractIds = [], leftTabDatas = []

      res[0] && res[0].length && res[0].map(item => {
        if (!buyContractIds.includes(item.source_id)) {
          buyContractIds.push(item.source_id)
          leftTabDatas.push({
            ...item,
            desc: item.description,
            view_type: item.support_network,
          })
        }
      })
      if ((this.props.location.params && this.props.location.params.tabKey) || !res[0].length) {
        currentKey = 'service-center'
        curData = res[1]
      } else {
        currentKey = 'my-service'
        curData = leftTabDatas
      }
      this.setState({
        currentKey,
        curData: curData,
        myServiceData: leftTabDatas,
        serviceCenterData: res[1],
        buyContractIds,
        showLoading: false,
      })
    }).catch(e => {
      message.error(e)
    })
  }

    // 获取我的服务列表
    getMyServiceList = () => {
      return new Promise((resolve, reject) => {
        getData().get(myServiceList)
          .then(res => {
            if (res && res.status === 200) {
              resolve(res.data)
            } else {
              message.error('获取我的服务列表失败！')
              this.setState({
                showLoading: false,
              })
            }
          })
          .catch(e => {
            message.error(e)
          })
      })
    }

    // 获取服务中心列表
    getServiceCenterList = () => {
      return new Promise((resolve, reject) => {
        getData().get(serviceCenterList)
          .then(res => {
            if (res && res.status === 200) {
              resolve(res.data.data)
            } else {
              message.error('获取服务中心列表失败！')
              this.setState({
                showLoading: false,
              })
            }
          })
          .catch(e => {
            message.error(e)
          })
      })
    }

    // 前往服务中心
    goToServiceCenter = () => {
      this.setState({
        curData: this.state.serviceCenterData,
        currentKey: 'service-center',
      })
    }

    // 服务详情
    goToServiceDetails = (item) => {
      this.props.history.push({
        pathname: '/dashboard/applicationService/serviceDetails',
        params: {
          item,
        },
      })
    }

    // 切换tab更改数据
    changeTabs = (key) => {
      let curData = [], currentKey = 'my-service'
      switch (key) {
      case 'my-service':
        curData = this.state.myServiceData
        currentKey = 'my-service'
        break
      case 'service-center':
        curData = this.state.serviceCenterData
        currentKey = 'service-center'
        break
      default:
        break
      }
      this.setState({
        curData,
        currentKey,
      })
    }

    // 显示咨询服务modal
    handleModalVisible = (value) => {
      this.setState({
        showServiceModal: value,
      })
    }

    render() {
      const { tabArr, curData, currentKey, buyContractIds, showServiceModal, showLoading } = this.state
      return (
        <div className="application-service-wrap common">
          {/* <div className="title">应用服务</div> */}
          {
            showLoading
              ? <Spin style={{ marginTop: 200 }} size="large"/>
              : <Tabs
                className="service-tabs"
                activeKey={currentKey}
                onChange={this.changeTabs}
                getPopupContainer={node => {
                  if (node) {
                    return node.parentNode
                  }
                  return document.body
                }}
              >
                {
                  tabArr && tabArr.map(item => {
                    return (
                      <TabPane tab={item.tabText} key={item.key}>
                        <CommonCard
                          data={curData}
                          type={item.key}
                          buyContractIds={buyContractIds}
                          goToServiceCenter={this.goToServiceCenter}
                          goToServiceDetails={this.goToServiceDetails}
                          handleModalVisible={this.handleModalVisible}
                        />

                      </TabPane>
                    )
                  })
                }
              </Tabs>
          }
          <ServiceModal visible={showServiceModal} handleModalVisible={this.handleModalVisible}/>
        </div>
      )
    }
}

export default ApplicationService
